<template>
  <div class="border-r-width-1px">
    <n-tag
      :color="active ? activeTabColor : defaultTabColor"
      :closable="false"
      :bordered="false"
      @click="handleClick"
      @close="handleClose"
      class="tag"
      :class="{ 'font-bold': active, 'hover:cursor-pointer': true }"
      size="medium"
    >
      <div class="flex flex-y-center">
        <slot></slot>
        <icon-close
          v-if="fullPath !== ROUTE_HOME.path"
          :is-primary="active"
          :primary-color="themeColor"
          @click="handleClose"
        />
      </div>
    </n-tag>
  </div>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/store'
import { computed, toRef } from 'vue'
import { ROUTE_HOME } from '@/router'
import { IconClose } from '../IconClose'

interface Props {
  fullPath: string
  active?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  active: false,
})

const theme = useThemeStore()
const activeTabColor = computed(() => ({ color: '#ffffff00', textColor: theme.themeColor }))
const defaultTabColor = { color: '#ffffff00' }
const themeColor = toRef(theme, 'themeColor')

const emit = defineEmits<{
  (e: 'close', fullPath: string): void
  (e: 'click', fullPath: string): void
}>()

function handleClose() {
  emit('close', props.fullPath)
}
function handleClick() {
  emit('click', props.fullPath)
}
</script>

<style scoped>
.tag:hover {
  color: v-bind(themeColor);
}
</style>
